<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 普通对象
    var zhang = {
        name: "张三",  // value:"张三",writable:true, configable:true
        age: 18,
        height: "177cm",
        weight: "70kg",
    }

    // 给一个普通的对象添加取值拦截和赋值拦截
    // for(let key in zhang){
    //     let defaultValue = zhang[key]; // 根据原对象得到中间变量  => 通过中间变量进行取值和赋值
    //     console.log(key,defaultValue);
    //     Object.defineProperty(zhang,key,{
    //         get:function(){
    //             console.log("取值拦截");
    //             return defaultValue;
    //         },
    //         // set:function(val){
    //         //     console.log("赋值拦截",val);
    //         //     defaultValue = val;
    //         // }
    //     })
    // }
    // console.log(zhang);

    // console.log(zhang.name);
    // zhang.name = "李四"
    // console.log(zhang);




    // 代理模式  => 根据原对象得到一个新对象(代理对象), 对代理对象的操作可以同步到原对象
    var zhang = {
        name: "张三",  // value:"张三",writable:true, configable:true
        age: 18,
        height: "177cm",
        weight: "70kg",
    }

    var obj = {};  //创建新对象
    for(let key in zhang){ // 遍历原对象
        Object.defineProperty(obj,key,{
            get:function(){
                return zhang[key];
            },
            set:function(val){
                zhang[key] = val;
            }
        })
    }

    console.log(obj);
    console.log(zhang);

    console.log(obj.name);

    obj.name = "李四";
    console.log(zhang);



</script>

</html>